import { View, Text, Button, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState } from 'react'
import { useAppContext } from '../../../store'
import { formatPrice } from '../../../utils'
import './index.scss'

export default function ChefDishes() {
  const { state, dispatch } = useAppContext()
  const { dishes, categories } = state
  const [selectedFilter, setSelectedFilter] = useState('all') // 'all', 'available', 'unavailable'

  const handleAddDish = () => {
    Taro.navigateTo({ url: '/pages/chef/dishes/edit/index' })
  }

  const handleEditDish = (dishId: string) => {
    Taro.navigateTo({ url: `/pages/chef/dishes/edit/index?id=${dishId}` })
  }

  const handleDeleteDish = (dishId: string) => {
    Taro.showModal({
      title: '确认删除',
      content: '确定要删除这个菜品吗？',
      success: (res) => {
        if (res.confirm) {
          dispatch({ type: 'DELETE_DISH', payload: dishId })
          Taro.showToast({ title: '删除成功', icon: 'success' })
        }
      }
    })
  }

  const handleBack = () => {
    Taro.navigateBack()
  }

  const getCategoryName = (categoryId: string) => {
    const category = categories.find(cat => cat.id === categoryId)
    return category?.name || '未分类'
  }

  // 根据筛选条件过滤菜品
  const getFilteredDishes = () => {
    switch (selectedFilter) {
      case 'available':
        return dishes.filter(dish => dish.available)
      case 'unavailable':
        return dishes.filter(dish => !dish.available)
      default:
        return dishes
    }
  }

  const filteredDishes = getFilteredDishes()

  return (
    <View className='chef-dishes'>
      <View className='header'>
        <View className='header-left'>
          <Button className='back-btn' onClick={handleBack}>← 返回</Button>
          <Text className='title'>菜品管理</Text>
        </View>
        <Button className='add-btn' onClick={handleAddDish}>+ 添加菜品</Button>
      </View>

      <View className='stats-bar'>
        <View 
          className={`stat-item ${selectedFilter === 'all' ? 'active' : ''}`}
          onClick={() => setSelectedFilter('all')}
        >
          <Text className='stat-number'>{dishes.length}</Text>
          <Text className='stat-label'>总菜品</Text>
        </View>
        <View 
          className={`stat-item ${selectedFilter === 'available' ? 'active' : ''}`}
          onClick={() => setSelectedFilter('available')}
        >
          <Text className='stat-number'>{dishes.filter(d => d.available).length}</Text>
          <Text className='stat-label'>可售</Text>
        </View>
        <View 
          className={`stat-item ${selectedFilter === 'unavailable' ? 'active' : ''}`}
          onClick={() => setSelectedFilter('unavailable')}
        >
          <Text className='stat-number'>{dishes.filter(d => !d.available).length}</Text>
          <Text className='stat-label'>停售</Text>
        </View>
      </View>

      <View className='filter-info'>
        <Text className='filter-text'>
          {selectedFilter === 'all' && '显示全部菜品'}
          {selectedFilter === 'available' && '显示可售菜品'}
          {selectedFilter === 'unavailable' && '显示停售菜品'}
        </Text>
        <Text className='result-count'>({filteredDishes.length} 个结果)</Text>
      </View>

      <View className='dishes-list'>
        {filteredDishes.map(dish => (
          <View key={dish.id} className='dish-item'>
            <View className='dish-image'>
              <Image 
                src={dish.image || '/assets/images/default-dish.png'}
                className='dish-img'
                mode='aspectFill'
              />
            </View>
            <View className='dish-info'>
              <View className='dish-header'>
                <Text className='dish-name'>{dish.name}</Text>
                <Text className={`dish-status ${dish.available ? 'available' : 'unavailable'}`}>
                  {dish.available ? '可售' : '停售'}
                </Text>
              </View>
              <Text className='dish-desc'>{dish.description}</Text>
              <View className='dish-meta'>
                <Text className='dish-category'>{getCategoryName(dish.category)}</Text>
                <Text className='dish-price'>{formatPrice(dish.price)}</Text>
              </View>
            </View>
            <View className='dish-actions'>
              <Button className='edit-btn' onClick={() => handleEditDish(dish.id)}>
                编辑
              </Button>
              <Button className='delete-btn' onClick={() => handleDeleteDish(dish.id)}>
                删除
              </Button>
            </View>
          </View>
        ))}
        {filteredDishes.length === 0 && dishes.length > 0 && (
          <View className='empty-state'>
            <View className='empty-icon'>🔍</View>
            <Text className='empty-text'>
              {selectedFilter === 'available' && '暂无可售菜品'}
              {selectedFilter === 'unavailable' && '暂无停售菜品'}
            </Text>
            <Text className='empty-desc'>
              {selectedFilter === 'available' && '所有菜品都已停售'}
              {selectedFilter === 'unavailable' && '所有菜品都在售'}
            </Text>
          </View>
        )}
        {dishes.length === 0 && (
          <View className='empty-state'>
            <View className='empty-icon'>🍽️</View>
            <Text className='empty-text'>暂无菜品</Text>
            <Text className='empty-desc'>点击下方按钮添加第一个菜品</Text>
            <Button className='add-first-btn' onClick={handleAddDish}>
              添加第一个菜品
            </Button>
          </View>
        )}
      </View>
    </View>
  )
} 